<template>
	<view>
 	<view class="denglu" v-show="PageStatus ==0">
 		<view class="dl_title">
 			<text>登录</text>
 			<view class="dl_ious"></view>
 		</view>

 		<view class="form">
 			<input class="form_input" placeholder-style="font-size: 30rpx;color: #B3B3B3;" type="text" v-model="username" @blur="checkvalue('username')" auto-blur="true" @focus='userPlaceholder = ""'  :placeholder="userPlaceholder" />
 			<input class="form_input" placeholder-style="font-size: 30rpx;color: #B3B3B3;" type="password" v-model="password" @blur="checkvalue('password')" auto-blur="true" @focus='pwdPlaceholder = ""' :placeholder="pwdPlaceholder" />
 			<text class="errtext">{{errmsg}}</text>
 			<button class="form_button" hover-class='button-hover' @click="goLogin">登录</button>
 		</view>

 		<view class="dl_text">
 			<text class="dltext1">没有账号？</text><text class="dltext2" @click="pushregistered">现在注册</text>
 		</view>
 	</view>
	
	<register v-show="PageStatus == 1" @switchStatus = "switchStatus"></register>
	
	</view>
 </template>

 <script>
 	import md5 from '../../common/md5.js'
	import register from '../registered/index.vue'
 	export default {
 		components: {
			register
		},

 		props: {},
 		data() {
 			return {
 				errmsg: '',
 				username: '',
 				password: '',
				userPlaceholder: '用户名',
				pwdPlaceholder: '用户密码',
				PageStatus: 0
 			};
 		},
 		computed: {},
 		onLoad() {

 		},
 		onShow() {},
 		methods: {
 			//跳转到注册页面
 			pushregistered() {
 				uni.navigateTo({
 					url: "../registered/index"
 				});
				this.PageStatus = 1
 			},
			// 表单验证，验证登录用户名和密码
 			checkvalue(value) {
 				var that = this;
 				let username = that.username
 				let password = that.password
 				if (value == 'username' && username === '') {
 					that.errmsg = '用户名不能为空';
					this.userPlaceholder = '用户名'
 				} else if (value == 'password' && password === '') {
 					that.errmsg = '密码不能为空';
					this.pwdPlaceholder = '用户密码'
 				} else {
 					that.errmsg = '';
 				}
				
 			},
 			goLogin() {
 				var that = this;
 				let username = that.username
 				let password = that.password
				var dataRequest={
					"username":that.username,
					"password":that.password
				}
				
 				if (username === '') {
 					that.errmsg = '用户名不能为空';
 				} else if (password === '') {
 					that.errmsg = '密码不能为空';
 				} else {
					uni.request({
						url:'http://taruinfo.work:8088/dologin',
						data:dataRequest,
						method:'POST',
						success:function(res){
							// console.log(res.data.code)
							if(res.data.code ==200){
								uni.setStorage({
									key:'myinfo',
									data:res.data.data
								}),
								// uni.setStorage({
								// 	key:'info',
								// 	data:{
								// 		'username':that.username,
								// 		'password':that.password
								// 	}
								// }),
								uni.setStorage({
									key:'token',
									data:res.data.data.token,
									success() {
										uni.showToast({
										    title: res.data.message,
											icon:"success",
										    duration: 2000
										});
										setTimeout(function() {
											uni.reLaunch({
												url: '../index/index',
											});
										},1000);
									}
								})
							}else{
								console.log(res.data.message)
								uni.showToast({
										title:res.data.message,
										icon:"none",
										duration: 2000
									});
							}
						},
						fail:function(res){
							uni.showToast({
							    title:'出错了，请联系开发者',
								icon:"none",
							    duration: 2000
							});
						}
					})
 				}
 			},
			switchStatus(p){
				this.PageStatus = p
			}
 		},
 	};
 </script>

 <style lang="less">
 	.denglu {
 		.dl_title {
 			margin: 0 74rpx;
 			margin-top: 72rpx;

 			text {
 				font-size: 54rpx;
 				font-weight: 700;
 				color: #262626;
 			}

 			.dl_ious {
 				margin-top: -16rpx;
 				height: 14rpx;
 				width: 106rpx;
 				background-color: #88DFBA;
 				border-radius: 4rpx;

 			}
 		}

 		.form {
 			margin: 0 74rpx;
 			margin-top: 56rpx;
 			width: 630rpx;

 			.form_input {
 				width: 630rpx;
 				height: 110rpx;
 				border-bottom: 1rpx solid #cccccc;
 			}

 			.form_button {
 				margin-top: 98rpx;
 				background-color: #4ab386;
 				border-radius: 8rpx;
 				height: 100rpx;
 				line-height: 100rpx;
 				font-size: 36rpx;
 				color: #FFFFFF;
 			}
 		}

 		.errtext {
 			margin-top: 26px;
 			font-size: 26rpx;
 			color: #f13535;
 		}

 		.dl_text {
 			position: absolute;
 			bottom: 129rpx;
 			width: 100%;
 			text-align: center;
 			font-size: 24rpx;

 			.dltext1 {
 				color: #b3b3b3;
 			}

 			.dltext2 {
 				font-size: 26rpx;
 				color: #3c78e6;
 			}
 		}
 	}
	.button-hover{
		background-color: #65d2a3;
		opacity:0.5;
	}
 </style>